<template>
	<div class="aidir_item">
		<div class="icon" @click="handleLookDetail()">
			<svg-icon icon-name="smart_dir"></svg-icon>
			<h4>{{ data.name }}</h4>
		</div>
		<el-button-group>
			<el-button size="medium" type="text" icon="el-icon-view" @click="handleLookDetail()">详情</el-button>
			<el-button size="medium" type="text" icon="el-icon-edit" @click="handleUpdateAiDir()">编辑</el-button>
			<el-button size="medium" type="text" icon="el-icon-delete" @click="handleDeleteAiDir()">删除</el-button>
		</el-button-group>
	</div>
</template>

<script>
import { deleteAiDir } from '@/api/data/tbNetAiDir';
export default {
	props: {
		data: { type: Object, default: () => {} }
	},
	methods: {
		//查看智能目录详情
		handleLookDetail() {
			this.$router.push({ path: `/data/smartDirectory/${this.data.id}`, query: { name: this.data.name } });
		},

		//编辑智能目录
		handleUpdateAiDir() {
			this.$emit('edit');
		},

		//删除智能目录
		handleDeleteAiDir() {
			let that = this;
			this.$confirm(`此操作将删除【<font color="#f90">${this.data.name}</font>】智能目录, 是否继续?`, '删除提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				dangerouslyUseHTMLString: true,
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await this.deleteDataRequest(this.data.id);
						instance.confirmButtonLoading = false;
					}
					done();
				}
			}).catch(() => {});
		},

		//删除数据请求
		async deleteDataRequest(id) {
			let result = await deleteAiDir(id).then((res) => res.data);
		}
	}
};
</script>

<style lang="scss" scoped>
.aidir_item {
	position: relative;
	padding-top: 56.25%;
	border-radius: 4px;
	border: solid 1px #f2f6fc;
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
	.icon {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 0;
		right: 0;
		left: 0;
		bottom: 37px;
		cursor: pointer;
		h4 {
			line-height: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
			margin: 10px 10px 0;
		}
		svg {
			width: 64px;
			height: 64px;
			fill: var(--primary);
		}
		&:hover {
			svg {
				fill: var(--primary-hover);
			}
			h4 {
				color: var(--primary-hover);
			}
		}
	}
	.el-button-group {
		display: flex;
		justify-content: space-between;
		border-top: solid 1px #f2f6fc;
	}
}
</style>
